<template>
    <div class="mainWapper">
        <el-row type="flex" justify="center" align="middle" class="wrapper">
            <el-col :span="8">
                <el-card class="box-card">
                    <div class="logo">
                        <img src="../assets/login_title.png" alt="" />
                    </div>
                    <el-form ref="form" :model="form" class="pad">
                    <el-form-item>
                        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登&nbsp;录</el-button>
                        <el-button @click="cancel">取&nbsp;消</el-button>
                    </el-form-item>
                    </el-form>
                </el-card>
            </el-col>            
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
      return {
        form: {
          username:'',
          password:''
        }
      }
    },
    methods: {
      login() {
        this.$axios({
            url:'/login',
            method:'post',
            data:this.form
        }).then(res => {
            if(res.data.message == '登录成功'){
                console.log(res);
                localStorage.setItem('token',res.data.data.token);
                localStorage.setItem('user',JSON.stringify(res.data.data.user));
                this.$router.replace('/');
                this.$message.success(res.data.message);
            }else{
                this.$message.error(res.data.message);
            }
        })
      },
      cancel(){
          this.form ={
              username:'',
              password:''
          }
      }
    }
}
</script>

<style lang="less" scoped>
.mainWapper{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: url('../assets/login_bg.jpg') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    .wrapper{
        position: absolute;
        top:50%;
        bottom:50%;
        left:0;
        right:0;
    }
    .logo{
       padding-bottom: 30px; 
    }
    .pad{
        width:300px;
        margin:0 auto;
    }
}
</style>